<template>
  <div class="goods-info">
    <navbar/>
    <div class="info-wrapper" v-for="(item, index) of list" :key="index">
      <div class="info left-wrapper">
        <div class="img-item border"
             :class="{'active-item': currentIdx===index}"
             @click="changeIndex(index)"
             v-for="(ts,index) of item.sku_img"
             :key="index">
          <img :src="ts.imgUrl" alt="">
        </div>
      </div>
      <div class="info big-img">
        <img :src="item.imgUrl" alt="">
      </div>
      <div class="info right-wrapper">
        <div class="item-title border-bottom">
          <p v-if="list[0]">{{ list[0].name }}</p>
          <p v-if="list[0].desc" class="title-desc">{{ list[0].name }}</p>
        </div>
        <div class="item-details border-bottom">
          <div class="dts prices">
            <div class="txt">
              <span>价格</span>
            </div>
            <div class="options">
              <span>
                ¥<span>{{ list[0].price|money }}</span>
              </span>
            </div>
          </div>
          <div class="dts colors" v-if="list[0].colors">
            <div class="txt">
              <span>颜色选择</span>
            </div>
            <div class="options">
              <span class="border" v-for="(clr, idx) of item.colors" :class="{'activeOpt': curIndex === idx}" @click="changeIdx(idx)">{{clr.name}}</span>
            </div>
          </div>
          <div class="dts amount">
            <div class="txt">
              <span>数量选择</span>
            </div>
            <div class="options">
              <el-input-number v-model="num1" @change="handleChange" size="mini" :min="1" :max="list[0].amount" label="描述文字"></el-input-number>
              <span class="last">库存:  {{ list[0].amount }} </span>
            </div>
          </div>
        </div>
        <div class="choose">
          <div class="cart border">
            <span>加入购物车</span>
          </div>
          <div class="go-purchase border">
            <span>
              立即购买
            </span>
          </div>
        </div>
      </div>
    </div>

    <info-footer class="info-footer"/>
  </div>
</template>

<script>
  import Navbar from '@/public/components/HeaderNavbar'
  import Footer from '@/public/components/Footer'
  import axios from 'axios'
  export default {
    name: "GoodsInfo",
    data () {
      return {
        pathId: this.$route.query.itemId,
        allItem: [],
        tips:[],
        currentIdx: 0,
        curIndex: 0,
        num1: 1
      }
    },
    components: {
      Navbar,
      InfoFooter: Footer
    },
    created () {
      this.getAllInfo()
      console.log(this.$data)
    },
    methods: {
      getAllInfo () {
        axios.get('/api/summary.json')
          .then(this.getAllInfoSucc)
          .catch(err=> {
            console.log(error)
          })
      },
      getAllInfoSucc (res) {
        console.log(res)
        if (res && res.status === 200) {
          this.allItem = res.data.data
        }
      },
      changeIndex (val) {
        this.currentIdx = val
      },
      handleChange(value) {
        console.log(value);
      },
      changeIdx (val) {
        this.curIndex = val
      }
    },
    computed: {
      list (){
        let allItemInfo = this.allItem.filter(item=>{
          return item.id === this.values
        });
        return allItemInfo
      },
      values(){
        return this.$route.query.itemId
      },
    },
    watch: {
      values (n,o){
        console.log(n)
        console.log(o)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/common.styl'
  .info-wrapper{
    margin-top: $bannerMarginTop;
    padding: $bannerPadding;
    display: flex;
  }
  .left-wrapper {
    width: 8%;
    padding-top: 25px;
  }
  .big-img{
    width: 42%;
  }
  .right-wrapper {
    width: 50%;
  }
  .active-item {
    border: 2px solid rgb(249, 194, 71)
    border-radius: 10px;
  }
  .left-wrapper .img-item, .big-img {
    margin-top: 10px
  }
  .left-wrapper .img-item{
    display: grid;
  }
  .left-wrapper .img-item img, .big-img img {
    width: 100%;
    border-radius: 6px;
  }
  .left-wrapper .img-item::before {
    border: 1px solid rgb(245, 197, 127)
    border-radius: 10px;
  }
  .item-title, .item-details{
    padding: 10px 0 20px;
  }
  .item-title p {
    font-size: 24px;
    font-family: sans-serif;
    color: #333;
    font-weight: normal;
  }
  .item-title p.title-desc {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #999;
    font-weight: 300;
  }
  .item-details .dts {
    display: flex;
    padding: 10px 0;
  }
  .txt {
    width: 25%;
    font-size: 14px;
    color: #777;
    padding: 10px 0;
  }
  .options {
    width: 75%;
    line-height: 36px;
  }
  .activeOpt {
    border: 2px solid rgb(249, 194, 17);
  }
  .prices .options span{
    color: #333;
    font-size: 18px;
  }
  .prices .options span span {
    margin-left: 10px;
    font-size: 20px;
    color: #f00;
  }
  .colors .options span {
    padding: 2px 13px;
    margin: 5px;
    font-size: 14px;
    color: #444;
  }
  .colors .options span:hover {
    border: 1px solid rgb(245, 197, 127);
    cursor: pointer;
  }
  .amount .options span.last {
    margin-left: 30px;
    font-size: 14px;
    color: #777;
  }
  .choose {
    padding: 30px 0;
  }
  .choose .cart, .choose .go-purchase {
    display: inline-block;
    padding: 10px 20px;
  }
  .choose .go-purchase {
    margin-left: 20px;
    color: #f00;
  }
  .choose .go-purchase::before {
    border: 2px solid #f00;
  }
  .choose .cart {
    color: #fff;
    background: #f00;
  }
  .choose .cart::before {
    border: 2px solid #fff;
  }
</style>
